<template>
	<view >
		<view v-if="!vuex_isMobile">
			<view class="banner-container">
				<view class="banner-image">
					<view class="banner-box">
						<view class="banner-item"
							style="background: linear-gradient( 180deg, rgba(25,63,147,0.9) 0%, rgba(13,37,91,0.9) 100%);">
							<image src="/static/index/icon1.png" style="width: 80px;height: 64px;"></image>
							<view class="text">就医指引</view>
						</view>
						<view class="banner-item"
							style="background: linear-gradient( 180deg, rgba(25,63,147,0.9) 0%, rgba(13,37,91,0.9) 100%);">
							<image src="/static/index/icon2.png" style="width: 80px;height: 64px;"></image>
							<view class="text">预约挂号</view>
						</view>
						<view class="banner-item"
							style="background: linear-gradient( 180deg, rgba(220,182,126,0.9) 0%, rgba(153,116,61,0.9) 100%);">
							<image src="/static/index/icon3.png" style="width: 80px;height: 64px;"></image>
							<view class="text">查找医生</view>
						</view>
						<view class="banner-item"
							style="background: linear-gradient( 180deg, rgba(220,182,126,0.9) 0%, rgba(153,116,61,0.9) 100%);">
							<image src="/static/index/icon4.png" style="width: 80px;height: 64px;"></image>
							<view class="text">人才引进</view>
						</view>
						<view class="banner-item"
							style="background: linear-gradient( 180deg, rgba(154,30,22,0.9) 0%, rgba(85,14,9,0.9) 100%);">
							<image src="/static/index/icon5.png" style="width: 80px;height: 64px;"></image>
							<view class="text">公益服务</view>
						</view>
						<view class="banner-item"
							style="background: linear-gradient( 180deg, rgba(154,30,22,0.9) 0%, rgba(85,14,9,0.9) 100%);">
							<image src="/static/index/icon6.png" style="width: 80px;height: 64px;"></image>
							<view class="text">临床科研</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="index-news">
					<view class="index-title">
						<view style="font-size: 36px;">
							<text class="main-color">医院</text>
							<text>新闻</text>
						</view>
						<view class="index-title-border">
							<view class="left"></view>
							<view class="right"></view>
						</view>
					</view>
					<view class="index-news-swiper-box">
						<view class="bg-text">
							NEWS
						</view>
						<view class="index-news-swiper">
							<view class="swiper-left" @click="swiperLeft()">
								<uni-icons type="left" size="24" color="#FFFFFF"></uni-icons>
							</view>
							<swiper class="swiper" :current="swiperCurrent" circular autoplay :interval="5000"
								:duration="500">
								<swiper-item v-for="item in newsList" :key="item.id" @click="toNewDetail(item)">
									<view class="swiper-item">
										<image :src="item.thumb" style="width: 400px;height: 264px;">
										</image>
										<view class="swiper-item-right">
											<view class="swiper-item-right-title u-line-1">
												{{item.title}}
											</view>
											<view class="swiper-item-right-content">
												{{item.article1}}
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
							<view class="swiper-right" @click="swiperRight()">
								<uni-icons type="right" size="24" color="#FFFFFF"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="index-news-box">
					<view class="index-news-box-top">
						<view class="index-news-box-top-left">
							<view
								:class="newActive == item.id ? 'index-news-box-top-left-item-active' : 'index-news-box-top-left-item'"
								v-for="(item, index) in newCate" :key="index" @click="getNewsLists(1,item.id)">
								{{item.name}}
							</view>
						</view>
						<view class="index-news-box-top-right" @click="toNew()">查看更多</view>
					</view>
					<view class="index-news-box-list" v-for="(item, index) in newList" :key="index"
						@click="toNewDetail(item)">
						<view class="index-news-box-list-title">
							{{item.title}}
						</view>
						<view class="index-news-box-list-time">
							{{$u.timeFormat(item.createTime, 'yyyy-mm-dd')}}
						</view>
					</view>
				</view>
				<view class="index-dept">
					<view class="index-dept-top">
						<view class="index-dept-top-title">
							<text style="color: #FFDDA9;">科室</text>
							<text style="color: #FFFFFF;">介绍</text>
							<view class="index-dept-top-title-border"></view>
						</view>
						<view class="index-dept-top-right" @click="toDept()">
							查看更多
						</view>
					</view>
					<view class="index-dept-box">
						<view class="index-dept-item" v-for="(item, index) in deptList" :key="index"
							@click="toDeptDetail(item)">
							<image :src="item.thumb" style="width: 100px;height: 80px;"></image>
							<view class="index-dept-item-name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="index-service">
					<view class="index-title">
						<view style="font-size: 36px;">
							<text class="main-color">特色</text>
							<text>服务</text>
						</view>
						<view class="index-title-border">
							<view class="left"></view>
							<view class="right"></view>
						</view>
					</view>
					<view class="index-service-box">
						<view class="index-service-item" v-for="(item, index) in serviceList" :key="index"
							@click="toServiceList()">
							<image :src="item.img" style="width: 387px;height: 674px;"></image>
							<view class="index-service-item-name">
								{{item.name}}
							</view>
							<view class="index-service-item-more">
								了解更多
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="index-m">
			<image src="/static/index/banner-m.png" style="width: 100%;height: 763px;"></image>
			<view class="banner-box">
				<view>
					<view class="banner-item" style="background: linear-gradient( 180deg, #4279F3 0%, #0223A4 100%);">
						<image src="/static/index/icon1.png" style="width: 145px;height: 116px;"></image>
					</view>
					<view class="text">就医指引</view>
				</view>
				<view>
					<view class="banner-item" style="background: linear-gradient( 180deg, #4279F3 0%, #0223A4 100%);">
						<image src="/static/index/icon2.png" style="width: 145px;height: 116px;"></image>
					</view>
					<view class="text">预约挂号</view>
				</view>
				<view>
					<view class="banner-item" style="background: linear-gradient( 180deg, #DCB67E 0%, #99743D 100%);">
						<image src="/static/index/icon3.png" style="width: 145px;height: 116px;"></image>
					</view>
					<view class="text">查找医生</view>
				</view>
				<view>
					<view class="banner-item" style="background: linear-gradient( 180deg, #DCB67E 0%, #99743D 100%);">
						<image src="/static/index/icon4.png" style="width: 145px;height: 116px;"></image>
					</view>
					<view class="text">人才引进</view>
				</view>
				<view>
					<view class="banner-item" style="background: linear-gradient( 180deg, #E15B5B 0%, #BB1242 100%);">
						<image src="/static/index/icon5.png" style="width: 145px;height: 116px;"></image>
					</view>
					<view class="text">公益服务</view>
				</view>
				<view>
					<view class="banner-item" style="background: linear-gradient( 180deg, #E15B5B 0%, #BB1242 100%);">
						<image src="/static/index/icon6.png" style="width: 145px;height: 116px;"></image>
					</view>
					<view class="text">临床科研</view>
				</view>
			</view>
			<view class="index-news-box-m">
				<view class="index-news-box-top">
					<view :class="newActive == item.id ? 'index-news-box-top-item-active' : 'index-news-box-top-item'"
						v-for="(item, index) in newCate" :key="index" @click="getNewsLists(1,item.id)">
						{{item.name}}
					</view>
				</view>
				<view class="index-news-box-list" v-for="(item, index) in newList" :key="index" @click="toNewDetail(item)">
					<view v-if="item.thumb" class="index-news-box-list-title">
						<view class="">
							<view class="title">
								{{item.title}}
							</view>
							<view class="index-news-box-list-dec">
								{{item.article1}}
							</view>
						</view>
						<view class="">
							<image :src="item.thumb" style="width: 490px;height: 381px;"></image>
						</view>
					</view>
					<view v-if="!item.thumb" class="index-news-box-list-title1">
						{{item.title}}
					</view>
					<view v-if="!item.thumb" class="index-news-box-list-dec">
						{{item.article1}}
					</view>
					<view class="index-news-box-list-time">
						{{$u.timeFormat(item.createTime, 'yyyy-mm-dd')}}
					</view>
				</view>
				<view class="index-news-box-more" @click="toNew()">
					查看更多
				</view>
			</view>
			<view class="index-dept-m">
				<view class="index-dept-top">
					<view class="index-dept-top-title">
						<text style="color: #FFDDA9;">科室</text>
						<text style="color: #FFFFFF;">介绍</text>
						<view class="index-dept-top-title-border"></view>
					</view>
					<view class="index-dept-top-right" @click="toDept()">
						查看更多
					</view>
				</view>
				<view class="index-dept-box">
					<view class="index-dept-item" v-for="(item, index) in deptList1" :key="index"
						@click="toDeptDetail(item)">
						<image :src="item.thumb" style="width: 181px;height: 145px;"></image>
						<view class="index-dept-item-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="index-service-m">
				<view class="index-title-m">
					<view style="font-size: 65px;">
						<text class="main-color">特色</text>
						<text>服务</text>
					</view>
					<view class="index-title-border">
						<view class="left"></view>
						<view class="right"></view>
					</view>
				</view>
				<view class="index-service-box">
					<view class="index-service-item" v-for="(item, index) in serviceList" :key="index"
						@click="toServiceList()">
						<image :src="item.img1" style="width: 1218px;height: 440px;"></image>
						<view class="index-service-item-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<foot-bar />
	</view>
</template>

<script>
	/**
	 * 程序启动页
	 * */
	import footBar from "@/pages/bottom/foot-bar.vue"
	import rightBtn from "@/pages/right/right-btn.vue"
	import {
		getDeptList,
		getMenu,
		getNewsList
	} from "@/common/api.js";
	export default {
		components: {
			footBar,
			rightBtn
		},
		data() {
			return {
				swiperCurrent: 0,
				newCate: [],
				newActive: '',
				newsList: [],
				newList: [],
				deptList: [],
				deptList1: [],
				serviceList: [{
					img: '/static/index/service/pic1.png',
					img1: '/static/index/service/pic11.png',
					name: '三大技术中心'
				}, {
					img: '/static/index/service/pic2.png',
					img1: '/static/index/service/pic22.png',
					name: '海南医院联动'
				}, {
					img: '/static/index/service/pic3.png',
					img1: '/static/index/service/pic33.png',
					name: 'YMDT模式'
				}]
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('pageData', data => {
				console.log(data)
				// data即传过来的参数
			})
			this.getDeptLists()
			this.getNewsLists()
		},
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop);
		},
		onShow(params) {
			console.log(params)
		},
		methods: {
			swiperRight() {
				this.swiperCurrent += 1
			},
			swiperLeft() {
				this.swiperCurrent -= 1
			},
			// 注册
			// onRegister() {
			// 	uni.navigateTo({
			// 		url: '/pages/html'
			// 	})
			// },
			getNewsLists(type, id) {
				if (type == 1) {
					this.newActive = id
					getNewsList({
						menuId: id,
						pageSize: 5,
						pageNo: 1
					}).then(res => {
						res.data.list.map(item => {
							item.article1 = item.article.replace(
									/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi,
									'\n')
								.replace(/<br\/?>/gi, '\n').replace(/<[^>/]+>/g, '')
								.replace(/(\n)?<\/([^>]+)>/g, '').replace(/\u00a0/g, ' ')
								.replace(/&nbsp;/g, ' ').replace(/<\/?(img)[^>]*>/gi, '')
								.replace(/&amp;/g, "&").replace(/&lt;/g, "<")
								.replace(/&gt;/g, ">")
								.replace(/&#39;/g, "\'")
								.replace(/&quot;/g, "\"")
								.replace(/<\/?.+?>/g, "")
						})
						this.newList = res.data.list
					})
				} else {
					getMenu({
						parentId: 4
					}).then(response => {
						this.newCate = response.data
						this.newActive = response.data[0].id
						getNewsList({
							menuId: response.data[0].id,
							pageSize: 5,
							pageNo: 1
						}).then(res => {
							res.data.list.map(item => {
								item.article1 = item.article.replace(
										/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi,
										'\n')
									.replace(/<br\/?>/gi, '\n').replace(/<[^>/]+>/g, '')
									.replace(/(\n)?<\/([^>]+)>/g, '').replace(/\u00a0/g, ' ')
									.replace(/&nbsp;/g, ' ').replace(/<\/?(img)[^>]*>/gi, '')
									.replace(/&amp;/g, "&").replace(/&lt;/g, "<")
									.replace(/&gt;/g, ">")
									.replace(/&#39;/g, "\'")
									.replace(/&quot;/g, "\"")
									.replace(/<\/?.+?>/g, "")
							})
							this.newList = res.data.list
							this.newsList = res.data.list
						})
					})
				}
			},
			toNew() {
				uni.setStorageSync('activeOneMenuName', 4)
				this.$u.vuex('vuex_activeOneMenuName', 4)
				uni.setStorageSync('activeTopOneMenuName', '新闻中心')
				getMenu({
					parentId: 4
				}).then(response => {
					uni.navigateTo({
						url: `/pages/content`,
						success: function(res) {
							uni.setStorageSync('activeMenu', response.data)
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('pageData', {
								data: response.data
							})
						}
					})
				})
			},
			toNewDetail(item) {
				uni.navigateTo({
					url: '/pages/new-detail?id=' + item.id,
				})
			},
			getDeptLists() {
				getDeptList({
					menuId: 12
				}).then(res => {
					let deptList = []
					let deptList1 = []
					res.data.map(item => {
						item.cmsContentDeptList.map(item => {
							if (deptList.length < 12) {
								deptList.push(item)
							}
							if (deptList1.length < 8) {
								deptList1.push(item)
							}
						})
					})
					this.deptList = deptList
					this.deptList1 = deptList1
				})
			},
			toDeptDetail(item) {
				uni.setStorageSync('activeOneMenuName', 2)
				this.$u.vuex('vuex_activeOneMenuName', 2)
				uni.setStorageSync('activeTopOneMenuName', '学科介绍')
				getMenu({
					parentId: 2
				}).then(response => {
					uni.navigateTo({
						url: `/pages/dept-detail?id=${item.id}`,
						success: function(res) {
							uni.setStorageSync('activeMenu', response.data)
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('pageData', {
								data: response.data
							})
						}
					})
				})
			},
			toDept() {
				uni.setStorageSync('activeOneMenuName', 2)
				this.$u.vuex('vuex_activeOneMenuName', 2)
				uni.setStorageSync('activeTopOneMenuName', '学科介绍')
				getMenu({
					parentId: 2
				}).then(response => {
					uni.navigateTo({
						url: `/pages/content`,
						success: function(res) {
							uni.setStorageSync('activeMenu', response.data)
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('pageData', {
								data: response.data
							})
						}
					})
				})
			},
			toServiceList() {
				uni.setStorageSync('activeOneMenuName', 3)
				this.$u.vuex('vuex_activeOneMenuName', 3)
				uni.setStorageSync('activeTopOneMenuName', '特色服务')
				getMenu({
					parentId: 3
				}).then(response => {
					uni.navigateTo({
						url: `/pages/content`,
						success: function(res) {
							uni.setStorageSync('activeMenu', response.data)
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('pageData', {
								data: response.data
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-m {
		background-color: #F3F3F3;

		.banner-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			padding: 21px 38px 0;
			margin-bottom: 21px;
			background-color: #FFFFFF;

			.banner-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 54px;
				color: #FFFFFF;
				width: 290px;
				height: 218px;
				margin: 0 69px;
			}

			.text {
				font-weight: 400;
				font-size: 47px;
				color: #434343;
				line-height: 69px;
				text-align: center;
				padding-top: 29px;
				padding-bottom: 54px;
			}
		}

		.index-news-box-m {
			width: 100%;
			padding: 0 94px;
			background-color: #FFFFFF;

			.index-news-box-top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 72px 32px 47px;
				margin-bottom: 20px;

				.index-news-box-top-item {
					font-weight: 400;
					font-size: 54px;
					color: #A0A4B9;
					line-height: 78px;
				}

				.index-news-box-top-item-active {
					font-weight: 700;
					font-size: 54px;
					color: #193F93;
					line-height: 78px;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 50px;
						bottom: -29px;
						width: 116px;
						height: 0px;
						border: 3px solid #193F93;

					}
				}
			}

			.index-news-box-list {
				padding-bottom: 105px;

				.index-news-box-list-title {
					display: flex;

					.title {
						width: 647px;
						font-weight: 400;
						font-size: 50px;
						color: #151515;
						line-height: 74px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
				}

				.index-news-box-list-title1 {
					font-weight: 400;
					font-size: 50px;
					color: #151515;
					line-height: 74px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.index-news-box-list-dec {
					font-weight: 400;
					font-size: 43px;
					color: #A0A4B9;
					line-height: 63px;
					margin-bottom: 36px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}

				.index-news-box-list-time {
					font-weight: 400;
					font-size: 43px;
					color: #BBBBBB;
					line-height: 32px;
				}
			}

			.index-news-box-more {
				border-top: 2px solid #EAEAEA;
				font-weight: 400;
				font-size: 47px;
				color: #193F93;
				line-height: 123px;
				text-align: center;
			}
		}

		.index-dept-m {
			width: 100%;
			height: 840px;
			background-image: url('/static/index/deptbg.png');
			background-size: cover;
			padding: 62px 72px;

			.index-dept-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 84px;

				.index-dept-top-title {
					font-weight: 600;
					font-size: 65px;
					line-height: 87px;
					margin-bottom: 14px;

					.index-dept-top-title-border {
						width: 167px;
						height: 4px;
						background: #FFDDA9;
					}
				}

				.index-dept-top-right {
					font-weight: 400;
					font-size: 47px;
					color: #FFFFFF;
					line-height: 69px;
					cursor: pointer;
				}
			}

			.index-dept-box {
				display: flex;
				flex-wrap: wrap;

				.index-dept-item {
					flex: 0 0 calc((100% / 4));
					margin-bottom: 65px;
					display: flex;
					flex-direction: column;
					align-items: center;

					.index-dept-item-name {
						font-weight: 400;
						font-size: 43px;
						color: #FFFFFF;
						line-height: 58px;
						margin-top: 29px;
					}
				}
			}
		}

		.index-service-m {
			width: 100%;
			background-color: #FFFFFF;
			padding: 58px 72px;
			margin-top: 21px;

			.index-service-box {
				margin-top: 58px;

				.index-service-item {
					position: relative;

					.index-service-item-name {
						position: absolute;
						left: 87px;
						top: 58px;
						z-index: 9;
						font-weight: 400;
						font-size: 47px;
						color: #FFFFFF;
					}
				}
			}
		}

	}

	.banner-container {
		width: 100%;
		height: 1078px;
		background-color: #B6BFC6;
		padding: 42px 100px 0;
		box-shadow: inset 0px -30px 50px 0 #FFFFFF;

		.banner-image {
			width: 100%;
			height: 1036px;
			background-image: url('/static/index/banner.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-shadow: inset 0px -30px 50px -50px #FFFFFF;
			position: relative;

			.banner-box {
				position: absolute;
				bottom: 48px;
				left: -100px;
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: center;

				.banner-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 16px;
					color: #FFFFFF;
					width: 192px;
					height: 200px;
					margin-right: 10px;

					.text {
						margin-top: 10px;
					}
				}
			}
		}

	}

	.index-title {
		font-weight: bold;
		color: #434343;
		line-height: 46px;

		.index-title-border {
			display: flex;

			.left {
				width: 60px;
				height: 2px;
				background: #193F93;
			}

			.right {
				width: 32px;
				height: 2px;
				background: #DCB67E;
			}
		}
	}

	.index-title-m {
		font-weight: bold;
		color: #434343;
		line-height: 87px;

		.index-title-border {
			display: flex;

			.left {
				width: 109px;
				height: 4px;
				background: #193F93;
			}

			.right {
				width: 58px;
				height: 4px;
				background: #DCB67E;
			}
		}
	}

	.index-news {
		width: 100%;
		padding: 20px 360px;

		.index-news-swiper-box {
			width: 100%;
			position: relative;
			height: 280px;
			background-color: #FFFFFF;

			.bg-text {
				font-weight: 600;
				font-size: 128px;
				color: rgba(187, 187, 187, 0.1);
				line-height: 128px;
				position: absolute;
				left: 10px;
				top: 10px;
				z-index: 0;
			}

			.index-news-swiper {
				position: absolute;
				top: 50px;
				left: 0;
				z-index: 9;
				height: 280px;
				width: 100%;
				display: flex;
				align-items: center;

				.swiper-left {
					width: 40px;
					height: 80px;
					background: #193F93;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20px;
				}

				.swiper-right {
					width: 40px;
					height: 80px;
					background: #193F93;
					margin-left: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
				}


				.swiper {
					height: 280px;
					flex: 1;

					.swiper-item {
						display: flex;

						image {
							width: 400px;
						}

						.swiper-item-right {
							width: 648px;
							margin-left: 32px;

							.swiper-item-right-title {
								font-weight: 500;
								font-size: 24px;
								color: #434343;
								line-height: 32px;
								margin-bottom: 16px;
							}

							.swiper-item-right-content {
								text-indent: 4ch;
								font-weight: 400;
								font-size: 16px;
								color: #686868;
								line-height: 22px;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 8;
								overflow: hidden;
							}
						}
					}
				}
			}
		}

	}

	.index-news-box {
		height: 480px;
		margin-top: 50px;
		width: 100%;
		padding: 40px 360px;
		background-color: #FAFAFA;

		.index-news-box-top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			margin-bottom: 30px;

			.index-news-box-top-left {
				display: flex;
				align-items: center;

				.index-news-box-top-left-item {
					font-weight: 400;
					font-size: 20px;
					color: #686868;
					line-height: 27px;
					margin-right: 40px;
				}

				.index-news-box-top-left-item-active {
					font-weight: 400;
					font-size: 20px;
					color: #193F93;
					line-height: 27px;
					margin-right: 40px;
				}
			}

			.index-news-box-top-right {
				font-weight: 400;
				font-size: 16px;
				color: #BBBBBB;
				line-height: 24px;
			}
		}

		.index-news-box-list {
			padding: 10px 0;
			border-bottom: 1px solid #EAEAEA;
			margin-bottom: 10px;

			.index-news-box-list-title {
				font-weight: 400;
				font-size: 16px;
				color: #434343;
				line-height: 21px;
				margin-bottom: 4px;
			}

			.index-news-box-list-time {
				font-weight: 400;
				font-size: 14px;
				color: #BBBBBB;
				line-height: 19px;
			}
		}
	}

	.index-dept {
		width: 100%;
		height: 574px;
		background-image: url('/static/index/deptbg.png');
		background-size: cover;
		padding: 48px 360px 10px;

		.index-dept-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 74px;

			.index-dept-top-title {
				font-weight: 600;
				font-size: 36px;
				line-height: 48px;

				.index-dept-top-title-border {
					width: 92px;
					height: 2px;
					background: #FFDDA9;
				}
			}

			.index-dept-top-right {
				font-weight: 400;
				font-size: 20px;
				color: #FFFFFF;
				line-height: 24px;
				cursor: pointer;
			}
		}

		.index-dept-box {
			display: flex;
			flex-wrap: wrap;

			.index-dept-item {
				flex: 0 0 calc((100% / 6));
				margin-bottom: 84px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.index-dept-item-name {
					font-weight: 400;
					font-size: 16px;
					color: #FFFFFF;
					line-height: 21px;
					margin-top: 10px;
				}
			}
		}
	}

	.index-service {
		width: 100%;
		padding: 20px 360px;

		.index-service-box {
			margin-top: 48px;
			display: flex;
			justify-content: space-between;

			.index-service-item {
				position: relative;

				.index-service-item-name {
					position: absolute;
					left: 50px;
					top: 80px;
					z-index: 9;
					width: 20px;
					word-wrap: break-word;
					font-weight: 400;
					font-size: 26px;
					color: #FFFFFF;
					line-height: 34px;
				}

				.index-service-item-more {
					position: absolute;
					right: 40px;
					bottom: 100px;
					z-index: 9;
					width: 20px;
					word-wrap: break-word;
					font-weight: 400;
					font-size: 24px;
					color: #FFFFFF;
					line-height: 32px;
				}
			}
		}
	}

	.im-title {
		text {
			font-size: 46px;
			color: #101010;
		}
	}

	.im-title-fu {
		width: 400px;
		margin-top: 20px;

		text {
			font-size: 18px;
			color: #5a5a5a;
		}
	}

	.im-btn {
		width: 120px;
		height: 38px;
		margin-top: 60px;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			color: #fff;
		}

		background-color: $maincolor;
		border-radius: 20px;
		cursor: pointer;
	}

	.im-btn:hover {
		background-color: #2999FBBF;
	}

	.container-title {
		width: 100%;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-size: 36px;
		}
	}

	.message-sty {
		width: 300px;
		height: 300px;
	}

	.message-icon {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
		}
	}

	.message-title {
		margin-top: 30px;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #101010;
		}

		;
	}

	.message-title-fu {
		margin-top: 30px;
		line-height: 20px;

		text {
			color: #6A7180;
		}
	}

	.message-border {
		width: 30px;
		height: 4px;
		margin-top: 80px;
		border-radius: 16px;
	}

	.safety-container {
		width: 100%;
		height: 526px;
		background-color: #F9FAFC;
		display: flex;
	}

	.safety-item {
		width: 50%;
		height: 526px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.safety-right {
		width: 620px;
	}

	.safety-radius {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #333333;
	}

	.safety-title {
		margin-left: 20px;

		text {
			font-size: 22px;
			color: #333333;
		}
	}

	.safety-title-fu {
		margin-left: 30px;

		text {
			font-size: 16px;
			color: #666666;
		}
	}

	.deploy-container {
		width: 100%;
		padding: 0 60px;
		height: 491px;
		background-color: #F9FAFC;
		border-radius: 40px;
		display: flex;
	}

	.deploy-item {
		width: 180px;
		height: 400px;
		margin: 40px 0;
	}

	.deploy-title {
		margin-top: -80px;
		line-height: 30px;

		text {
			font-size: 24px;
			color: #333333;
		}
	}

	.deploy-title-fu {
		margin-top: 30px;

		text {
			font-size: 18px;
			color: #666666;
		}
	}
</style>